<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.svg" alt="" />
    </div>

    <div class="btn">
      <div class="btnlogin" @click="goLogin">手机号登录</div>
      <div class="btnbox" @click="goHome">立即体验</div>

      <div class="btntext" @click="goRegister">
        注册账号
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 注册弹出层 -->

    <!-- 登录弹出层 -->
    <van-popup
      v-model="Loginshow"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="head">登录体验更多精彩</div>
      <div class="txt">未注册的用户，请先注册</div>

      <!-- 登录界面 -->
      <div class="interface">
        <van-form @submit="login">
          <!-- 输入手机号，调起手机号键盘 -->
          <van-field
            v-model="user.phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <!-- 输入密码 -->
          <van-field
            v-model="user.password"
            :type="isShow ? 'text' : 'password'"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :right-icon="isShow ? 'eye-o' : 'closed-eye'"
            @click-right-icon="showPassword"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <!-- 忘记密码 -->
          <div class="forgot" @click="goRegister">
            <div class="forgot-text">忘记密码？</div>
          </div>

          <!-- 登录 -->
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {
      Loginshow: false,

      // 登录页面
      user: {
        tel: "",
        password: "",
      },

      //是否明文显示密码
      isShow: false,

      //手机号正则
      phoneReg: /^1[3-9]\d{9}$/,

      //密码正则(必须以字母开头, 字母数字_组合[6-16])
      passwordReg: /^[A-Za-z]\w{5,15}$/,
    };
  },

  methods: {
    goHome() {
      this.$router.push({ name: "Home" });
    },

    //跳转到修改密码页面
    goRegister() {
      this.$router.push({ name: "Register" });
    },

    //显示登录窗口
    goLogin() {
      this.Loginshow = true;
    },

    //显示密码
    showPassword() {
      this.isShow = !this.isShow;
    },

    //跳转到注册页面
    goRegister() {
      this.$router.push({ name: "Register" });
    },

    //登录
    login() {
      this.axios({
        method: "post",
        url: "/login/cellphone",
        data: {
          ...this.user,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            //登录成功
            this.$toast("登录成功");

            //将用户id存入cookie，创建有效期为1天的cookie
            this.$cookies.set("uid", res.data.account.id, { expires: 1 });

            setTimeout(() => {
              this.$router.push({ name: "Home" });
            }, 2000);
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #db2b1f;
}

.logo {
  width: 64px;
  height: 64px;
  margin: 50% auto;
  border-radius: 50%;
  background-color: #fff;
}

.logo img {
  width: 80px;
  height: 80px;
  position: relative;
  bottom: 6px;
  right: 10px;
}

.btn {
  width: 300px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.btnlogin {
  width: 300px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  color: #db2b1f;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}

.btnbox {
  width: 300px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.btntext {
  width: 80px;
  color: #fff;
  font-size: 14px;
  margin-left: auto;
}

// 登录弹出层
.head {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 10px 20px;
  font-size: 18px;
  letter-spacing: 2px;
  box-sizing: border-box;
}

.txt {
  padding: 10px;
  padding-left: 20px;
  color: #8d8d8d;
}

// 登录界面
.interface {
  position: relative;
  top: 20px;
}

.forgot {
  display: flex;
  margin-top: 20px;
}

.forgot-text {
  margin-left: auto;
  font-size: 14px;
  color: #8d8d8d;
}

/deep/.van-button--info {
  width: 300px;
  height: 40px;
  margin: 30px auto;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  background-color: #db2b1f;
  border-radius: 20px;
  border: 0;
}
</style>